<template>
    <el-dialog :title="form_title" width="50%" :before-close="handleClose" :visible="dialog_show">
        <el-form ref="department_form" :model="form" label-width="200px" v-if="form">
            <el-form-item label="部门logo：">
                <img class="form-department-logo" :src="img_file_path" alt="部门logo" @click="selectImg">
                <input type="file" @change="changeImgPath" style="display:none;">
            </el-form-item>
            <el-form-item label="部门名称：" prop="name" :rules="[
      { required: true, message: '部门名称不能为空' }]">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="onSubmit('department_form')">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import department from "@/api/department.js";
import { mapGetters } from "vuex";
import getImg from "@/tool/getimgpath.js";
import upload from "@/tool/upload.js";

export default {
    name: "create-edit-department",
    props: ["form_title", "id"],
    computed: {
        ...mapGetters("department1", [
            "is_department_form_dialog_show",
            "is_create_department"
        ])
    },
    data() {
        return {
            dialog_show: false,
            img_file: undefined,
            img_file_path: undefined,
            form: {
                name: undefined,
                file: undefined,
                remark: undefined
            }
        };
    },
    watch: {
        async is_department_form_dialog_show(newVal, oldVal) {
            this.dialog_show = newVal;
            if (newVal && this.id && !this.is_create_department) {
                await department.getDepartmentDetail(this.id).then(res => {
                    this.form = res;
                    this.img_file_path = this.form.file;
                });
            }
        },
        "form.file"(newVal, oldVal) {
            this.img_file_path = newVal;
        }
    },
    methods: {
        handleClose() {
            this.$refs["department_form"].resetFields();
            this.img_file_path = undefined;
            this.img_file = undefined;
            this.$store.commit(
                "department1/CHANGE_IS_DEPARTMENT_FORM_DIALOG_SHOW",
                false
            );
        },
        selectImg(ev) {
            document.querySelector("input[type=file]").click();
        },
        changeImgPath(ev) {
            this.img_file_path = getImg(ev.target.files[0]);
            this.img_file = ev.target.files[0];
        },
        onSubmit(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    if (this.img_file) {
                        await upload(this.img_file).then(res => {
                            this.form.file = res;
                        });
                    } else {
                        this.form.file = this.form.file || "";
                    }
                    if (this.is_create_department) {
                        this.form.pid = this.id || 0;
                        department.createDepartment(this.form).then(res => {
                            this.$message({
                                message: "创建成功!",
                                type: "success"
                            });
                            this.$store.dispatch(
                                "department1/getDepartmentTree"
                            );
                            this.$store.dispatch('department1/getSysDepartmentTree');
                            this.handleClose();
                        });
                    } else {
                        delete this.form.pid;
                        department.editDepartmentData(this.form).then(res => {
                            this.$message({
                                message: "编辑成功!",
                                type: "success"
                            });
                            this.$store.dispatch(
                                "department1/getDepartmentTree"
                            );
                            this.$store.dispatch('department1/getSysDepartmentTree');
                            this.handleClose();
                        });
                    }
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style>
.form-department-logo {
    width: 300px;
}
</style>
